<div id="main-container" class="container">
	<div *ngIf="!session" id="join">
		<div id="img-div"><img src="assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
		<div id="join-dialog" class="jumbotron vertical-center">
			<h1>Join a video session</h1>
			<form class="form-group" (submit)="joinSession()">
				<p>
					<label>Participant</label>
					<input class="form-control" type="text" id="userName" name="userName" [(ngModel)]="myUserName" required>
				</p>
				<p>
					<label>Session</label>
					<input class="form-control" type="text" id="sessionId" name="sessionId" [(ngModel)]="mySessionId" required>
				</p>
				<p class="text-center">
					<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
				</p>
			</form>
		</div>
	</div>

	<div *ngIf="session" id="session">
		<div id="session-header">
			<h1 id="session-title">{{mySessionId}}</h1>
			<input class="btn btn-large btn-danger" type="button" id="buttonLeaveSession" (click)="leaveSession()" value="Leave session">
		</div>
		<div *ngIf="mainStreamManager" id="main-video" class="col-md-6">
			<user-video [streamManager]="mainStreamManager"></user-video>
		</div>
		<div id="video-container" class="col-md-6">
			<div *ngIf="publisher" class="stream-container col-md-6 col-xs-6">
				<user-video [streamManager]="publisher" (click)="updateMainStreamManager(publisher)"></user-video>
			</div>
			<div *ngFor="let sub of subscribers" class="stream-container col-md-6 col-xs-6">
				<user-video [streamManager]="sub" (click)="updateMainStreamManager(sub)"></user-video>
			</div>
		</div>
	</div>
</div>